<template>
    <!-- 报表助手 -->
    <div class="report-aide-box h-full flex pl-3">
        <div class="report-aide-left pr-3 w-3/5">
            <div class="font-bold leading-10  head-title">员工信息表</div>
            <el-table :data="tableData" style="width: 100%; height: 88%;" border stripe  v-loading="loading" 
                :header-cell-style="{whiteSpace: 'nowrap' }">
                <el-table-column type="index" label="序号" width="60" align="left"
                    header-align="center"></el-table-column>
                <el-table-column prop="employee_id" label="员工编号" show-overflow-tooltip
                    header-align="center"></el-table-column>
                <el-table-column prop="name" label="姓名" header-align="center"></el-table-column>
                <el-table-column prop="sex" label="性别" header-align="center"></el-table-column>
                <el-table-column prop="age" label="年龄" header-align="center"></el-table-column>
                <el-table-column prop="phone" label="电话" header-align="center"></el-table-column>
                <el-table-column prop="education" label="学历" header-align="center"></el-table-column>
                <el-table-column prop="department" label="部门" header-align="center"></el-table-column>
                <el-table-column prop="employment_date" label="入职时间" header-align="center"></el-table-column>
            </el-table>
            <div class="flex justify-end" style="height:7.5%;">
                <el-pagination background style="justify-content: center;" v-model:current-page="currentPage"
                    v-model:page-size="pageSize" :page-sizes="[15, 20, 30, 50]"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
        </div>
        <div class="report-aide-right w-2/5 flex flex-col items-center pt-10">
            <div class="textera-save-style w-10/12">
                <el-input type="textarea" v-model="textareaVal" :rows="10" placeholder="请输入员工信息的查询要求"
                    class="text-input no-border" @focus="handleFocus" @blur="handleBlur" ref="textrea" />
                <el-icon class="clear-button" @click="clearInput" @mouseover="overColor" @mouseout="outColor">
                    <Close />
                </el-icon>
                <div class="button-container">
                    <el-button @click="setDefault">设为默认值</el-button>
                    <el-button type="primary" @click="saveInput">开始生成</el-button>
                </div>
            </div>
            <div class="ai-answers w-10/12" v-show="cardShow">
                <div class="flex flex-col">
                    <div class="flex self-start p-2.5  max-box">
                        <div class="w-11 h-11 mr-2.5">
                            <img src="/src/assets/images/robot_circle.png" alt="" class="w-11 h-full rounded">
                        </div>
                        <div class="ai-answer p-2.5 m-1.5 relative rounded-lg">
                            <div class="ai-triangle absolute"></div>
                            <span v-if="!aiAnswer" class="flex items-center"><img
                                    src="../../assets/images/avatar/long.gif" alt=""
                                    class="w-5 h-5 mr-1">AI正在生成报表......</span>
                            <span v-else-if="isShowTable==0" >对不起，找不到您要的数据！</span>
                            <span v-else >报表结果已经生成：</span>
                        </div>
                    </div>
                </div>
            </div>
            <el-card v-if="aiAnswer" class="w-10/12">
                <el-scrollbar>
                    <el-table :data="infoTableData" v-if="isShowTable == 1" style="width: 100%;" max-height="380" border
                        empty-text="没有匹配的内容"
                        :header-cell-style="{  whiteSpace: 'nowrap' }">
                        <!-- <el-table-column prop="编号" label="编号" show-overflow-tooltip align="center" header-align="center"
                            width="80"></el-table-column>
                        <el-table-column prop="姓名" label="姓名" header-align="center" align="center"
                            min-width="80"></el-table-column>
                        <el-table-column prop="性别" label="性别" header-align="center" align="center"
                            min-width="60"></el-table-column>
                        <el-table-column prop="电话" label="电话" header-align="center" align="center"
                            min-width="120"></el-table-column>
                        <el-table-column prop="学历" label="学历" header-align="center" align="center"
                            min-width="100"></el-table-column>
                        <el-table-column prop="部门" label="部门" header-align="center" align="center"></el-table-column>
                        <el-table-column prop="入职时间" label="入职时间" header-align="center" align="center"
                            min-width="100"></el-table-column> -->
                            <el-table-column v-for="(value, key) in infoTableData[0]" :key="key" :prop="key" :label="key"
                            show-overflow-tooltip align="center" header-align="center" :min-width="getColumnMinWidth(key)"></el-table-column>
                    </el-table>
                    <el-table :data="singleData" v-else-if="isShowTable == 2" style="width: 100%; height: 100%;" border
                        :show-header="false" class="oneDataTab">
                        <el-table-column prop="label" label="信息" align="center" width="140"
                            :class-name="'info-column'"></el-table-column>
                        <el-table-column prop="value" label="数据" align="center"></el-table-column>
                    </el-table>
                    <div v-else>对不起，找不到您要的数据！</div>
                </el-scrollbar>
            </el-card>
        </div>
    </div>
</template>

<script lang="ts" setup>
import ReportAide from '../../api/currentdemo/ReportAide';
const router = useRouter()

const tableData = ref([]);
const loading = ref(false);

const cardShow = ref(false);

const aiAnswer = ref(false);


const textareaVal = ref('');

const textrea = ref();

const Token = <string>localStorage.getItem('accessToken');

const isShowTable = ref(0);
const infoTableData = ref([]);
const singleData = ref([]);

//分页参数
const currentPage = ref(1);
const pageSize = ref(15);
const total = ref(0);
const handleSizeChange = (val: number) => {
    pageSize.value = val;
};
const handleCurrentChange = (val: number) => {
    currentPage.value = val;
};

//==================================
// 监听分页和搜索输入的变化
// 定义类型
interface filterinterface {
    page?: Number | null,
    page_size?: Number | null,
};
const filterData = ref<filterinterface>({
    page: currentPage.value,
    page_size: pageSize.value,
});
watch([currentPage, pageSize], () => {
    filterData.value.page = currentPage.value;
    filterData.value.page_size = pageSize.value;
    getTableData();
});

const getTableData = () => {
    loading.value = true; // 开始加载
    ReportAide.getStaffList(Token, filterData.value).then(res => {
        // console.log('res', res);
        tableData.value = res.data.list;
        total.value = res.data.total;
    }).finally(() => {
        loading.value = false; // 加载完成
    });
};
//================================
const handleFocus = () => {
    document.querySelector('.textera-save-style').classList.add('change-color');
};
const handleBlur = () => {
    document.querySelector('.textera-save-style').classList.remove('change-color');
};
const overColor = () => {
    document.querySelector('.clear-button').classList.add('a');
}
const outColor = () => {
    document.querySelector('.clear-button').classList.remove('a');
}
//小叉叉清空事件
const clearInput = () => {
    textareaVal.value = '';
};

//设为默认值
const setDefault = () => {
    // console.log('设为默认值');
    const defaultStr = `查询超过30岁，并且高中以上学历的男性员工`
    textareaVal.value = defaultStr;
};


// 获取列的最小宽度
const getColumnMinWidth = (key) => {
    switch (key) {
        case '姓名':
            return 80;
        case '性别':
            return 60;
        case '电话':
            return 120;
        case '学历':
            return 100;
        case '入职时间':
            return 100;
    }
};
const saveInput = () => {
    // console.log('查询');
    if (!textareaVal.value.trim()) {
        ElMessage.error('请填写查询要求');
        return;
    };
    cardShow.value = true;
    aiAnswer.value = false;
    isShowTable.value = 0;

    // loading.value = true; // 开始加载
    ReportAide.genAIreport(Token, textareaVal.value).then(res => {
        aiAnswer.value = true;
        // ElMessage.success('生成成功');
        // console.log('resresres',res);
        
        infoTableData.value = res.data;
        if (res.data.length > 1) {
            //多条数据
            ElMessage.success('生成成功');
            isShowTable.value = 1;
        } else if (res.data.length == 1) {
            //单条数据
            ElMessage.success('生成成功');
            isShowTable.value = 2;
            const filteredData = res.data[0];
            delete filteredData.invalid;
            delete filteredData.deleted;
            singleData.value = Object.keys(filteredData).map(key => ({
                label: key,
                value: filteredData[key]
            }));
        } else {
            // ElMessage.error('识别失败');
            ElMessage.error('生成失败');
            isShowTable.value = 0;
        }
        cardShow.value = true;

    }).finally(() => {
        // loading.value = false; // 加载结束
    }).catch(error => {
        ElMessage.error('生成失败');
        cardShow.value = true;
    });

}
onMounted(() => {
    getTableData();
    textrea.value.focus();
})


//===================================
// 页面缓存，清空所有的内容
watch(
    () => router.currentRoute.value,
    (newValue: any) => {
        textareaVal.value = '';
        cardShow.value = false;
        aiAnswer.value = false;
        if (textrea.value) {
            textrea.value.focus();
        }
    },
    { immediate: true }
);
</script>

<style scoped>
:deep(.el-textarea__inner) {
    border: none;
    box-shadow: none;
    resize: none;
}
.report-aide-box /deep/ .is-leaf {
    background-color: var(--v-table-bg-color);
    color: var(--v-table-color);
    font-weight: bold;
}
.textera-save-style.change-color {
    border-color: #409eff;
}
.head-title{
    color: var(--v-session-hist);
}
.textera-save-style {
    border-radius: 5px;
}

.clear-button.a {
    color: #409eff;
}

.max-box {
    max-width: 70%;
}

.ai-triangle {
    width: 0;
    height: 0;
    border-left: 10px solid rgba(0, 0, 0, 0);
    border-right: 10px solid rgba(0, 0, 0, 0);
    border-top: 10px solid var(--v-chat_box_shadow_1);
    top: 8px;
    left: -10px;
}

.ai-answer {
    background-color:var(--v-ai-custmer-bg-color,#434346);
    color: var(--v-txt_icon_black_2, #1a2029);
}

.ai-answers{
    margin: 10px 0;
}

.report-aide-right {
    /* border-left: 1px solid #dcdfe6; */
    border-left: 1px solid var(--v-yg-info-border-color);
}

:deep(.info-column) {
    background-color: #f5f7fa !important;
}
</style>